<template>
  <div>
    <div>
      <el-date-picker
        v-model="begin"
        type="date"
        placeholder="选择开始日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      -
      <el-date-picker
        v-model="end"
        type="date"
        placeholder="选择截止日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      <el-button @click="fetchData">开始查询</el-button>
    </div>
    <el-row>
      <el-col :span="12">
        <div ref="amountEcharts" style="height:500px"></div>
      </el-col>
      <el-col :span="12">
        <div ref="numEcharts" style="height:500px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GetOrderStatistics } from '@/api/order'
//引入echarts: 必须已经安装了依赖  npm install echarts
import * as echarts from 'echarts'
//定义变量绑定页面中的div容器：将来渲染echart图表
const amountEcharts = ref()
const numEcharts = ref()
//等待页面中的标签初始化后：再渲染数据到标签内
onMounted(() => {
  fetchData()
})

const begin = ref('')
const end = ref('')
const fetchData = async () => {
  const { data } = await GetOrderStatistics(begin.value, end.value)

  initEcharts(
    amountEcharts.value,
    data.dates,
    data.totalAmounts,
    '订单每日金额统计'
  )
  initEcharts(
    numEcharts.value,
    data.dates,
    data.totalNums,
    '订单每日订单数统计'
  )
}

const initEcharts = (dom, xData, valueData, title) => {
  //查找页面的dom标签：vue3 可以通过ref的方式查找标签
  let myChart = echarts.init(dom)
  let option = {
    title: {
      text: title,
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: valueData,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }
  option && myChart.setOption(option)
}
</script>
